<template>
  <div class="container">
    <el-dialog :title="formData.id ? '编辑用户' : '创建用户'" :visible="showDialog" @close="btnCancel">
      <el-form ref="formDialog" :model="formData" label-width="120px" :rules="rules">
      <el-form-item label="企业名称" prop="shortName">
        <el-input v-model="formData.shortName" style="width:90%" />
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="formData.company" style="width:90%" />
      </el-form-item>
      <p style="text-align: center">https://www.tianyancha.com (在此可查询所属公司及全称)</p>
      <el-form-item label="城市地区" prop="province">
       <el-row type="flex">
        <el-col>
          <el-select  placeholder="请选择" v-model="formData.province" style="width: 80%;" @visible-change="changeProvince">
            <el-option v-for="item in handelCity" :key="item" :label="item" :value="item"></el-option>
        </el-select>
         </el-col>
         <el-col>
        <el-select  placeholder="请选择" v-model="formData.city" style="width: 80%;" >
            <el-option v-for="item in handelArea" :key="item" :label="item" :value="item"></el-option>
        </el-select>
         </el-col>
       </el-row>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="formData.tags" style="width:90%" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input placeholder="请输入" type="textarea" v-model="formData.remarks" style="width:90%" ></el-input>
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
      </el-col>
    </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail, update, add } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      formData: {
        shortName: '',
        company: '',
        city: '',
        province: '',
        tags: '',
        remarks: ''
      },
      isFamous: '',
      rules: {
        shortName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '城市地区不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '城市地区不能为空', trigger: 'blur' }],
        tags: [{ required: true, message: '方向(企业标签)不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    handelCity: {
      type: Array,
      default: null
    },
    handelArea: {
      type: Array,
      default: null
    }
  },
  methods: {
    async btnOK () {
      try {
        // 表单校验
        await this.$refs.formDialog.validate()
        if (this.formData.id) {
          // 调取修改接口
          await update(this.formData)
        } else {
          // 新增
          await add({ ...this.formData, isFamous: true })
        }
        this.$emit('list')
        // 提示信息
        this.$message.success(this.formData.id ? '修改成功！' : '新增成功！')
        // 关闭弹窗
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel () {
      this.$refs.formDialog.resetFields()
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = null
      })
      this.$emit('update:showDialog', false)
    },
    // 编辑数据回显
    async handelEdit (id) {
      const { data } = await detail({ id })
      // console.log(data)
      this.formData = data
      // 注意：修改接口update的isFamous返回的是布尔值  其他接口原数据返回的 isFamous等于 1  所以进行布尔值转换 或者直接等于true
      this.formData.isFamous = Boolean(this.formData.isFamous)
      // this.formData.isFamous = true
    },
    // 城市
    async provinces () {
      const data = await provinces()
      this.handelCity = data
    },
    // // 地区
    // async citys () {
    //   const data = await citys(this.formInline.province)
    //   // console.log(data)
    //   this.handelArea = data
    // },
    // 下拉框出现/隐藏时触发
    async changeProvince () {
      // 地区
      this.handelArea = await citys(this.formData.province)
      if (this.handelArea.length) {
        this.formData.city = this.handelArea[0]
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
